<script setup>
import img1 from '../img/img1.jpg'
import img2 from '../img/img2.jpg'
import img3 from '../img/img3.jpg'
import img4 from '../img/img4.jpg'

const imgList = [
    { url: img1 },
    { url: img2 },
    { url: img3 },
    { url: img4 },

]
</script>
<template>
    <!-- 头部 -->
    <div class="header">
        <div class="header-left">
            欢迎来到途控智能科技(江苏)有限公司!我们将为您提供周到的服务!
        </div>
        <div class="header-right">
            <a href="#">关于我们</a>
            <a href="#">联系我们</a>
            <a href="#">百度xml</a>
            <a href="#">谷歌xml</a>
        </div>
    </div>
    <!-- 导航 -->
    <div class="header2">
        <div class="logo">
            <img src="../img/10059.png" alt="途控智能">
            <span>途控智能<br>
                <p>途控 让智能掌控未来！</p>
            </span>
        </div>
        <!-- 导航条 -->
        <div class="nav">
            <ul class="menu">
                <li><a href="#">首页</a></li>
                <li class="dropdown">
                    <a href="#">工控机中心</a>
                    <ul class="submenu">
                        <li><a href="#">工控机</a></li>
                        <li><a href="#">嵌入式工控机</a></li>
                        <li><a href="#">工业一体机</a></li>
                        <li><a href="#">工业显示器</a></li>
                    </ul>
                </li>
                <li><a href="#">解决方案</a></li>
                <li><a href="#">新闻动态</a></li>
                <li><a href="#">服务支持</a></li>
                <li><a href="#">关于途控</a></li>
            </ul>
        </div>
    </div>
    <!-- 轮播图 -->
    <div class="carousel">
        <el-carousel :interval="3000" arrow="always" height="600px" autoplay="true" loop="true">
            <el-carousel-item v-for="item in imgList" class="a1">
                <img :src="item.url" alt="carousel image">
            </el-carousel-item>
        </el-carousel>
    </div>
    <!-- 搜索 -->
    <div class="search">
        <div class="keywords">
            热门关键词：工控一体机、3U 4U工控机、无风扇工控机、嵌入式工控机、工控台式机、触摸显示器、工控平板电脑
        </div>
        <div class="search-bar">
            <input type="text" class="search-input" placeholder="请输入关键词">
            <button class="search-button">
            </button>
        </div>
    </div>
    <!-- 技术创新 -->
    <div class="container">
        <div class="section">
            <h2>技术创新</h2>
            <p>不断推进技术创新，提高自身的研发能力和技术实力，开发出具有竞争优势和市场需求的新产品和解决方案。</p>
        </div>
        <div class="section">
            <h2>品牌打造</h2>
            <p>根据目标市场的特点，为品牌在市场中找到一个独特的位置，使其在消费者心中形成独特的印象。</p>
        </div>
        <div class="section">
            <h2>营销创新</h2>
            <p>根据市场需求和竞争状况，制定合理的市场营销策略，拓展策略，寻找新的市场和客户，增加市场份额和业务规模。</p>
        </div>
    </div>
</template>
<style scoped>
@import '../css/header.css';
</style>
